<template>
	<view>
		<view class="projectType">
			<view class="projectType-title">选择您想看的行业类型的工程信息</view>
			<view class="projectType-list">
				<view class="tag-view" v-for="(list,index) in projectType" :key="index">
					<hylx-tag :circle="true" :inverted="list.inverted" :text="list.title" :type="initType" :key="index" @clickFn="checkType(index)" />
				</view>
			</view>
			<view class="project-save">
				<button type="primary" @click="save">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import hylxTag from '@/components/uni-tag/uni-xmlx-tag.vue'
	import data_xiangmuhangye from '@/common/static/data-xiangmuhangye.js';
	export default {
		components: {
			hylxTag
		},
		data() {
			return {
				projectType: data_xiangmuhangye,
				inverted: false,
				initType: 'primary',
				typeList: []
			}
		},
		onLoad: function(options) {
			for (let i = 0; i < data_xiangmuhangye.length; i++) {
				data_xiangmuhangye[i].inverted = true;
			}
			if (options.type != undefined) {
				var types = options.type.split(',');
				// console.log(types);
				if (types.length > 0 && types != undefined) {
					this.typeList = types;
					for (let i = 0; i < data_xiangmuhangye.length; i++) {
						if (this.isInArray(this.typeList, data_xiangmuhangye[i].value)) {
							data_xiangmuhangye[i].inverted = false;
							this.initType = 'default'
						}else{
							this.initType = 'primary'
						}
					}
				}
			}
		},
		methods: {
			setInverted() {
				this.inverted = !this.inverted;
			},
			checkType(index) {
				if (data_xiangmuhangye[index].inverted) {
					data_xiangmuhangye[index].inverted = false;
					this.initType = 'default'
					this.typeList.push(data_xiangmuhangye[index].value)
					if (data_xiangmuhangye[index].value == 0) {
						for (let i = 0; i < data_xiangmuhangye.length; i++) {
							data_xiangmuhangye[i].inverted = true;
							this.initType = 'primary'
						}
						data_xiangmuhangye[0].inverted = false;
						this.typeList = ['0']
					} else {
						if (this.isInArray(this.typeList, '0')) {
							data_xiangmuhangye[0].inverted = true;
							this.initType = 'primary'
							this.typeList = this.typeList.filter(item => {
								return item != "0";
							})
						}else{
							this.initType = 'primary'
						}
					}
					// console.log(this.typeList)
				} else {
					data_xiangmuhangye[index].inverted = true;
					this.typeList = this.typeList.filter(item => {
						return item != data_xiangmuhangye[index].value;
					});
					// console.log(this.typeList)
				}
			},
			save: function(e) {
				// console.log(e);
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.xiangmutypeedit = this.typeList;
				uni.navigateBack();
			},
			isInArray(arr, value) {
				for (var i = 0; i < arr.length; i++) {
					if (value === arr[i]) {
						return true;
					}
				}
				return false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.projectType {
		position: absolute;
		background-color: #fff;
		width: 100%;
		height: calc(100% - 30rpx);
		top: 15rpx;
		padding: 50rpx 0;

		.projectType-title {
			text-align: center;
			font-size: 36rpx;
		}

		.projectType-list {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			margin: 30rpx 20rpx;
			// .projectType-list-item {
			// 	border: 1rpx solid #f2f2f6;
			// 	border-radius: 30rpx;
			// 	padding: 15rpx 20rpx;
			// 	font-size: 24rpx;
			// 	margin-right: 20rpx;
			// 	margin-bottom: 15rpx;
			// 	color: #6f7588;
			// }

			// .projectType-list-item_on {
			// 	background-image: linear-gradient(to right, #1e3fff, #23b4ff);
			// 	border: 0;
			// 	color: #fff;
			// }
			.tag-view{
				margin: 0 15rpx 16rpx 15rpx;
			}
		}

		.project-save {
			width: 90%;
			display: flex;
			margin: 0 auto;

			button {
				height: 90rpx;
				width: 100%;
				border-radius: 50rpx;
				font-size: 32rpx;
				line-height: 90rpx;
			}
		}
	}
</style>
